<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/myacode/pen/PoqQQNM</title>

    <link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="title">Eyes on the screen</h1>
<div class="keyboard">
    <ul class="row row-0">
        <li class="pinky" id="esc">ESC</li>
        <li class="pinky" id="1">1</li>
        <li class="ring" id="2">2</li>
        <li class="middle" id="3">3</li>
        <li class="pointer1st" id="4">4</li>
        <li class="pointer2nd" id="5">5</li>
        <li class="pointer2nd" id="6">6</li>
        <li class="pointer1st" id="7">7</li>
        <li class="middle" id="8">8</li>
        <li class="ring" id="9">9</li>
        <li class="pinky" id="10">0</li>
        <li class="pinky" >-</li>
        <li class="pinky" >+</li>
        <li class="pinky" id="back">BACK</li>
    </ul>
    <ul class="row row-1">
        <li class="pinky" id="tab">TAB</li>
        <li class="pinky" id="Q">Q</li>
        <li class="ring" id="W">W</li>
        <li class="middle" id="E">E</li>
        <li class="pointer1st" id="R">R</li>
        <li class="pointer2nd" id="T">T</li>
        <li class="pointer2nd" id="Y">Y</li>
        <li class="pointer1st" id="U">U</li>
        <li class="middle" id="I">I</li>
        <li class="ring" id="O">O</li>
        <li class="pinky" id="P">P</li>
        <li class="pinky" >[</li>
        <li class="pinky" >]</li>
        <li class="pinky" >\</li>
    </ul>
    <ul class="row row-2">
        <li class="pinky" id="caps">CAPS</li>
        <li class="pinky" id="A">A</li>
        <li class="ring" id="S">S</li>
        <li class="middle" id="D">D</li>
        <li class="pointer1st" id="F">F</li>
        <li class="pointer2nd" id="G">G</li>
        <li class="pointer2nd" id="H">H</li>
        <li class="pointer1st" id="J">J</li>
        <li class="middle" id="K">K</li>
        <li class="ring" id="L">L</li>
        <li class="pinky" >:</li>
        <li class="pinky" >''</li>
        <li class="pinky" id="enter">ENTER</li>
    </ul>
    <ul class="row row-3">
        <li class="pinky" id="left-shift">SHIFT</li>
        <li class="pinky" id="Z">Z</li>
        <li class="ring" id="X">X</li>
        <li class="middle" id="C">C</li>
        <li class="pointer1st" id="V">V</li>
        <li class="pointer2nd" id="B">B</li>
        <li class="pointer2nd" id="N">N</li>
        <li class="pointer1st" id="M">M</li>
        <li class="middle" >,</li>
        <li class="ring" >.</li>
        <li class="pinky" >;</li>
        <li class="pinky" id="right-shift">SHIFT</li>
    </ul>
</div>
<h1 class="title">Hands on the keyboard</h1>
</body>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="script.js" type="module"></script>
</html>